import { login } from '@/api/user'
import { getToken, removeToken, setToken } from '@/utils/auth'
// 设置token初始状态
const state = {
  token: getToken() // 一初始化vuex的时候，就先从缓冲中先读 token持久化 => 放到缓存中
}
// 修改状态 vuex改变的时候也要设置token
const mutations = {
  // 设置一个方法 setToken
  setToken(state, token) {
    state.token = token // 设置token  只是修改state的数据 将数据设置给vuex  vuex变化 => 缓存数据
    setToken(token) // 同步给缓存
  },
  removeToken(state) {
    state.token = null // 将vuex数据置空
    removeToken() // 缓存的也这置空
  }
}
// 执行异步
const actions = {
  async login(context, data) { // 封装一个login方法
    // 调用login接口
    const token = await login(data)
    // axios默认给数据加了一层data
    context.commit('setToken', token)
  }
}
// 总结：vuex的持久化 初始化的时候先从缓存中读取，并赋值到初始化的状态上，一旦vuex发生变化，都同步给缓存
// Vuex的持久化如何实现 ？ Vuex和前端缓存相结合
// 这个问题是为了解决vuex刷新后数据失效问题 然后有几种解决方法 有一种就是借助js-cookie第三方库来解决 我的做法就是封装一套本地存储token的方法
// 初始化的时候先从缓存里读，每当我vuex数据发生变化的时候，然后在同步给缓存，这样缓存和vuex就能实现数据双向同步

// 代码中的处理主要遵循三个思路：

// 在对token进行初始化的时候先从本地取一下，优先使用本地取到的值
// 在设置token的时候除了在vuex中存一份，在本地也同步存一份
// 在删除token的时候除了把vuex中的删除掉，把本地的也一并删除

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
